<template>
  <div class="hotRank-body">
    <backTo-view :child-msg="current"></backTo-view>
    <!--<div class="header comheader">
      <i class="i-back"></i>
      <span>热门排行</span>
      <div class="fr">
        <input type="text" class="xs-search" />
        <i class=" i-home"></i>
      </div>
    </div>-->
    <div class="com-nav">
      <ul class="cf">
        <li class="small-li" :class="{active:index===count}" v-for="(item,index) in tabList" :key="index" @click="select(index)">{{item}}</li>
        <!--<li>  </li>-->
        <!--<li>  </li>-->
        <!--<li>  </li>-->
      </ul>
    </div>
    <div class="nav-content">
      <!--热门排行-->
      <div class="content hot" :class="{display:count===0}">
        <ul class="cf">
          <introduceList-view :child-msg="item" v-for="item in dataList" :key="item.id"></introduceList-view>
          <!--<li class="cf">
            <div class="fl ">
              <img src="/static/img/hyxd.png" alt="" class="fl" />
              <div class="fl ">
                <p class="font28">游戏虫APP下载</p>
                <p>43384人在玩<span> 134.6M</span></p>
                <p>（一句话描述）全新地图 高清新版</p>
              </div>
            </div>
            <div class="fr downDtn ">
              下载
            </div>
          </li>-->
        </ul>
      </div>
      <!--新游排行-->
      <div class="content newGame" :class="{display:count===1}">新游排行</div>
      <!--单机排行-->
      <div class="content single" :class="{display:count===2}">单机排行</div>
      <!--网游排行-->
      <div class="content webGame" :class="{display:count===3}">网游排行</div>
    </div>
  </div>
</template>

<script>
import backTo from '../components/backTo.vue'
import introduceList from '../components/introduceList.vue'
export default {
  name: 'hotRank',
  components: {
    'introduceList-view': introduceList,
    'backTo-view': backTo
  },
  data () {
    return {
      current: '热门排行',
      count: 0,
      dataList: [],
      tabList: ['热门排行', '新游排行', '单机排行', '网游排行']
    }
  },
  methods: {
    backTo (id) {
      this.$router.go(-1)
      // this.$router.push({path: '/detail', query: {userId: id}})
    },
    toDetail (id) {
      this.$router.push({path: '/detail', query: {userId: id}})
    },
    select (index) {
      this.count = index
    }
  },
  created () {
    let hotAPI = '/game/newlist/1'
    let that = this
    this.searchWord = this.$route.query.text
    // 此地有传auth(token)认证 为空就不会执行
    this.$request.get(hotAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          that.dataList = res.data.rst
        }
      }
    )
  }
}
</script>
<style scoped>
  .nav-content .content{
    display:none;
  }
  .nav-content .display{
    display:block;
  }
</style>
